import { Rate } from 'antd-mobile'
// import { useEffect, useState } from 'react'
import styles from './index.module.less'
import type Store from '../../store'
import type { Question, QuestionAnswer } from '../../interface'

type Props = Pick<Store, 'updateAnswer' | 'getQuestionResult'> & {
    question: Question
}

export const TeacherRateQuestion = (props: Props) => {
    const question = props.question.answer as QuestionAnswer[]

    return (
        <div className={styles.rateBox}>
            {props.question.teacher_name && (
                <div className={styles.teacher}>{`培训师：${props.question.teacher_name}`}</div>
            )}

            <div className={styles.questionBox}>
                {question?.map(item => {
                    return (
                        <div key={item.id} className={styles.item}>
                            <div className={styles.item_subtitle}>{item.name}</div>
                            <div className={styles.item_rating}>
                                <Rate
                                    value={(props.getQuestionResult(item.id) as number) ?? 0}
                                    count={props.question.score}
                                    onChange={v => {
                                        props.updateAnswer(item.id, v)
                                    }}
                                    style={{
                                        '--star-size': '38px',
                                        '--active-color': '#FF943E',
                                    }}
                                />
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
